<script lang="ts" setup>
import { graphic } from 'echarts/core'
import { useSettingsStore } from '/@/store/modules/settings'
import { lightenColor } from '/@/utils/lightenColor'

defineOptions({
  name: 'UserElectricity',
})

const settingsStore = useSettingsStore()
const { theme } = storeToRefs(settingsStore)

// User characteristics data from image
const cardInfo = reactive<any>([
  {
    title: '用户特征',
    en: 'User Characteristics',
    icon: 'user-line',
    data: [
      {
        name: '用户编号',
        en: 'User ID',
        value: 'U037',
        unit: '',
      },
      {
        name: '典型用电时段',
        en: 'Typical Usage Period',
        value: '19:00-21:00',
        unit: '',
      },
      {
        name: '波动率',
        en: 'Fluctuation Rate',
        value: '0.8',
        unit: 's',
      },
    ],
  },
  {
    title: '负荷特性',
    en: 'Load Characteristics',
    icon: 'dashboard-3-line',
    data: [
      {
        name: '峰值负荷',
        en: 'Peak Load',
        value: '9.87',
        unit: 'kW',
      },
      {
        name: '谷值负荷',
        en: 'Valley Load',
        value: '1.87',
        unit: 'kW',
      },
      {
        name: '峰谷比',
        en: 'Peak-Valley Ratio',
        value: '6.4',
        unit: '',
      },
    ],
  },
  {
    title: '能效评估',
    en: 'Energy Efficiency Evaluation',
    icon: 'pie-chart-line',
    data: [
      {
        name: '日累计用电量',
        en: 'Daily Total Consumption',
        value: '35.4',
        unit: 'kWh',
      },
      {
        name: '月累计用电量',
        en: 'Monthly Total Consumption',
        value: '1062',
        unit: 'kWh',
      },
      {
        name: '用电稳定性',
        en: 'Power Usage Stability',
        value: '95.6',
        unit: '%',
      },
    ],
  },
])

const selectedUserGroup = ref('上班族')
const userGroups = [
  { name: '上班族', count: 10 },
  { name: '老年用户', count: 20 },
  { name: '商户', count: 50 },
  { name: 'EV用户', count: 40 },
]

// Define accepted keys for groupUsers to fix TypeScript error
type UserGroupKey = '上班族' | '老年用户' | '商户' | 'EV用户'

interface UserData {
  id: string
  name: string
  area: string
  operation: string
  peakLoad?: string
  valleyLoad?: string
  peakValleyRatio?: string
  fluctuationRate?: string
  peakTimePercentage?: string
  nightUsagePercentage?: string
  periodicityIndex?: string
  typicalUsageTime?: string
  classificationScore?: number
  classificationBasis?: string[]
}

const groupUsers = reactive<Record<UserGroupKey, UserData[]>>({
  上班族: [
    {
      id: '10010',
      name: '住户3',
      area: 'XX区域',
      operation: '查看用户组',
      peakLoad: '1.2kw',
      valleyLoad: '0.3kw',
      peakValleyRatio: '0.25',
      fluctuationRate: '0.8',
      peakTimePercentage: '39%',
      nightUsagePercentage: '15%',
      periodicityIndex: '0.78',
      typicalUsageTime: '18-20点',
      classificationScore: 92,
      classificationBasis: ['峰时占比高', '工作日负荷模式固定', '夜间用电较少'],
    },
    {
      id: '10011',
      name: '住户5',
      area: 'XX区域',
      operation: '查看用户组',
      peakLoad: '1.5kw',
      valleyLoad: '0.4kw',
      peakValleyRatio: '0.27',
      fluctuationRate: '0.75',
      peakTimePercentage: '42%',
      nightUsagePercentage: '18%',
      periodicityIndex: '0.82',
      typicalUsageTime: '17-22点',
      classificationScore: 85,
      classificationBasis: ['工作日负荷波动大', '峰时占比高'],
    },
  ],
  老年用户: [
    {
      id: '20001',
      name: '住户12',
      area: 'YY区域',
      operation: '查看用户组',
      peakLoad: '0.9kw',
      valleyLoad: '0.5kw',
      peakValleyRatio: '0.56',
      fluctuationRate: '0.4',
      peakTimePercentage: '22%',
      nightUsagePercentage: '35%',
      periodicityIndex: '0.5',
      typicalUsageTime: '全天',
      classificationScore: 94,
      classificationBasis: ['负荷波动小', '全天用电分布均匀', '周末工作日差异小'],
    },
  ],
  商户: [
    {
      id: '30015',
      name: '商铺8',
      area: 'ZZ区域',
      operation: '查看用户组',
      peakLoad: '3.8kw',
      valleyLoad: '0.2kw',
      peakValleyRatio: '0.05',
      fluctuationRate: '0.9',
      peakTimePercentage: '65%',
      nightUsagePercentage: '5%',
      periodicityIndex: '0.95',
      typicalUsageTime: '10-18点',
      classificationScore: 97,
      classificationBasis: ['营业时间用电明显', '夜间用电极少', '周期性极强'],
    },
  ],
  EV用户: [
    {
      id: '40008',
      name: '住户23',
      area: 'XX区域',
      operation: '查看用户组',
      peakLoad: '7.2kw',
      valleyLoad: '0.6kw',
      peakValleyRatio: '0.08',
      fluctuationRate: '0.95',
      peakTimePercentage: '18%',
      nightUsagePercentage: '45%',
      periodicityIndex: '0.65',
      typicalUsageTime: '21-03点',
      classificationScore: 91,
      classificationBasis: ['夜间用电高峰明显', '充电功率高', '单次充电时长稳定'],
    },
  ],
})

// Selected user for detailed view and reassignment
const selectedUser = ref<UserData | null>(null)
const targetGroup = ref<UserGroupKey>('上班族')
const showUserDetails = ref(false)

// Function to view user details
const viewUserDetails = (user: UserData) => {
  selectedUser.value = user
  showUserDetails.value = true
}

// Function to reassign user to another group
const reassignUser = () => {
  if (!selectedUser.value) return

  // Remove from current group
  const currentGroup = selectedUserGroup.value as UserGroupKey
  const userIndex = groupUsers[currentGroup].findIndex((u) => u.id === selectedUser.value?.id)
  if (userIndex !== -1) {
    const user = groupUsers[currentGroup].splice(userIndex, 1)[0]
    // Add to target group
    groupUsers[targetGroup.value].push(user)
    // Update counts (in a real app, you'd update these from the backend)
    const currentGroupIndex = userGroups.findIndex((g) => g.name === currentGroup)
    const targetGroupIndex = userGroups.findIndex((g) => g.name === targetGroup.value)
    if (currentGroupIndex !== -1) userGroups[currentGroupIndex].count--
    if (targetGroupIndex !== -1) userGroups[targetGroupIndex].count++

    showUserDetails.value = false
    selectedUser.value = null
  }
}

const currentStatus = reactive<any>({
  status: '0',
  user: '0',
  hours: '0',
  currentDay: '0',
})

// Add data for different users
interface LoadData {
  current: number[]
  prediction: number[]
}

interface UserDataMap {
  [key: string]: LoadData
}

const userData: UserDataMap = {
  '0': {
    // 所有用户
    current: [120, 180, 150, 210, 300, 280, 160, 200, 268, 324, 380, 200, 150],
    prediction: [140, 200, 190, 250, 370, 330, 210, 250, 310, 380, 410, 230, 180],
  },
  '1': {
    // 上班族
    current: [90, 100, 80, 150, 260, 240, 120, 190, 300, 380, 350, 150, 100],
    prediction: [110, 130, 110, 180, 290, 270, 150, 220, 340, 400, 370, 170, 120],
  },
  '2': {
    // 老年用户
    current: [140, 150, 130, 120, 150, 200, 180, 160, 170, 250, 230, 210, 170],
    prediction: [150, 160, 140, 130, 170, 220, 190, 170, 190, 260, 250, 220, 180],
  },
  '3': {
    // 商户
    current: [60, 50, 40, 120, 350, 400, 390, 380, 360, 300, 200, 80, 60],
    prediction: [70, 60, 50, 140, 380, 420, 410, 400, 380, 320, 220, 100, 70],
  },
}

// Define series data for the third chart
const typicalLoadCurveData = {
  上班族: [120, 360, 210, 280, 430, 495, 160, 180, 268, 324, 500, 86, 470],
  老年用户: [5, 150, 420, 56, 89, 263, 2, 52, 249, 115, 25, 485, 152],
  商户: [210, 120, 340, 160, 195, 340, 240, 430, 390, 480, 260, 350, 120],
  EV用户: [90, 52, 63, 280, 190, 350, 210, 400, 180, 80, 120, 360, 400],
}

// Create a computed property to filter the series for the third chart
const chartSeriesThree = computed(() => {
  const hours = currentStatus.hours

  switch (hours) {
  case '0': {
    // Return all series for "全部用户"
    return [
      {
        name: '上班族',
        type: 'line',
        smooth: false,
        lineStyle: {
          color: '#1890ff',
        },
        areaStyle: {
          color: '#1890ff',
          opacity: 0.2,
        },
        showSymbol: false,
        data: typicalLoadCurveData['上班族'],
      },
      {
        name: '老年用户',
        type: 'line',
        smooth: false,
        lineStyle: {
          color: '#36cbcb',
        },
        areaStyle: {
          color: '#36cbcb',
          opacity: 0.2,
        },
        showSymbol: false,
        data: typicalLoadCurveData['老年用户'],
      },
      {
        name: '商户',
        type: 'line',
        smooth: false,
        lineStyle: {
          color: '#4ecb73',
        },
        areaStyle: {
          color: '#4ecb73',
          opacity: 0.2,
        },
        showSymbol: false,
        data: typicalLoadCurveData['商户'],
      },
      {
        name: 'EV用户',
        type: 'line',
        smooth: false,
        lineStyle: {
          color: '#ff9f43',
        },
        areaStyle: {
          color: '#ff9f43',
          opacity: 0.2,
        },
        showSymbol: false,
        data: typicalLoadCurveData['EV用户'],
      },
    ]
  }
  case '1': {
    // Return only 上班族 data
    return [
      {
        name: '上班族',
        type: 'line',
        smooth: false,
        lineStyle: {
          color: '#1890ff',
        },
        areaStyle: {
          color: '#1890ff',
          opacity: 0.2,
        },
        showSymbol: false,
        data: typicalLoadCurveData['上班族'],
      },
    ]
  }
  case '2': {
    // Return only 老年用户 data
    return [
      {
        name: '老年用户',
        type: 'line',
        smooth: false,
        lineStyle: {
          color: '#36cbcb',
        },
        areaStyle: {
          color: '#36cbcb',
          opacity: 0.2,
        },
        showSymbol: false,
        data: typicalLoadCurveData['老年用户'],
      },
    ]
  }
  case '3': {
    // Return only 商户 data
    return [
      {
        name: '商户',
        type: 'line',
        smooth: false,
        lineStyle: {
          color: '#4ecb73',
        },
        areaStyle: {
          color: '#4ecb73',
          opacity: 0.2,
        },
        showSymbol: false,
        data: typicalLoadCurveData['商户'],
      },
    ]
  }
  case '4': {
    // Return only EV用户 data
    return [
      {
        name: 'EV用户',
        type: 'line',
        smooth: false,
        lineStyle: {
          color: '#ff9f43',
        },
        areaStyle: {
          color: '#ff9f43',
          opacity: 0.2,
        },
        showSymbol: false,
        data: typicalLoadCurveData['EV用户'],
      },
    ]
  }
  // No default
  }

  // Default: return all series
  return [
    {
      name: '上班族',
      type: 'line',
      smooth: false,
      lineStyle: {
        color: '#1890ff',
      },
      areaStyle: {
        color: '#1890ff',
        opacity: 0.2,
      },
      showSymbol: false,
      data: typicalLoadCurveData['上班族'],
    },
    {
      name: '老年用户',
      type: 'line',
      smooth: false,
      lineStyle: {
        color: '#36cbcb',
      },
      areaStyle: {
        color: '#36cbcb',
        opacity: 0.2,
      },
      showSymbol: false,
      data: typicalLoadCurveData['老年用户'],
    },
    {
      name: '商户',
      type: 'line',
      smooth: false,
      lineStyle: {
        color: '#4ecb73',
      },
      areaStyle: {
        color: '#4ecb73',
        opacity: 0.2,
      },
      showSymbol: false,
      data: typicalLoadCurveData['商户'],
    },
    {
      name: 'EV用户',
      type: 'line',
      smooth: false,
      lineStyle: {
        color: '#ff9f43',
      },
      areaStyle: {
        color: '#ff9f43',
        opacity: 0.2,
      },
      showSymbol: false,
      data: typicalLoadCurveData['EV用户'],
    },
  ]
})

// Create a computed property to update chart series based on selection
const chartSeries = computed(() => {
  const status = currentStatus.status
  const user = currentStatus.user
  const data = userData[user] || userData['0']

  switch (status) {
  case '0': {
    // For combined view, return array of series
    return [
      {
        name: '当前负荷',
        type: 'line',
        smooth: false,
        lineStyle: {
          color: '#21ba94',
        },
        areaStyle: {
          color: '#21ba94',
          opacity: 0.2,
        },
        showSymbol: false,
        data: data.current,
      },
      {
        name: '预测负荷',
        type: 'line',
        smooth: false,
        lineStyle: {
          color: '#ff9f43',
          type: 'dashed',
        },
        areaStyle: {
          color: '#ff9f43',
          opacity: 0.1,
        },
        showSymbol: false,
        data: data.prediction,
      },
    ]
  }
  case '1': {
    // Return only current data
    return {
      name: '当前负荷',
      type: 'line',
      smooth: false,
      lineStyle: {
        color: '#21ba94',
      },
      areaStyle: {
        color: '#b5e7db',
      },
      data: data.current,
      itemStyle: {
        borderRadius: [2, 2, 0, 0],
        color: new graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: lightenColor(theme.value.color, 50) },
          { offset: 1, color: theme.value.color },
        ]),
      },
    }
  }
  case '2': {
    // Return only prediction data
    return {
      name: '负荷预测',
      type: 'line',
      smooth: false,
      lineStyle: {
        color: '#ff9f43',
        type: 'dashed',
      },
      areaStyle: {
        color: '#ffd8b6',
      },
      data: data.prediction,
      itemStyle: {
        borderRadius: [2, 2, 0, 0],
        color: new graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#ffcc99' },
          { offset: 1, color: '#ff9f43' },
        ]),
      },
    }
  }
  // No default
  }
})

const option = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      formatter (params: any) {
        let result = `当前时刻:<br/>${params[0].name}<br/>`
        params.forEach((item: any) => {
          result += `${item.seriesName}: ${item.value}kw<br/>`
        })
        return result
      },
      extraCssText: 'width:150px;white-space:wrap',
      backgroundColor: '#21ba94',
      textStyle: {
        color: '#fff',
      },
      borderWidth: 0,
    },
    legend: {
      show: currentStatus.status === '0' || currentStatus.status === '2',
      bottom: 10,
      data: ['当前负荷', '负荷预测'],
    },
    grid: {
      top: '5%',
      left: '5%',
      right: '5%',
      bottom: currentStatus.status === '0' || currentStatus.status === '2' ? '15%' : '10%',
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
      axisTick: {
        alignWithLabel: true,
      },
    },

    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          opacity: 0.6,
        },
      },
    },

    series: Array.isArray(chartSeries.value) ? chartSeries.value : [chartSeries.value],
  }
})

const optionTwo = reactive<any>({
  title: {
    text: '',
  },
  legend: {
    show: true,
    top: 'bottom',
    data: ['上班族', '老年用户', '商户', 'EV用户'],
  },
  grid: {
    top: '5%',
    left: '5%',
    right: '5%',
    bottom: '10%',
    containLabel: true,
  },
  radar: {
    shape: 'polygon',
    indicator: [{ name: '谷峰比' }, { name: '波动率' }, { name: '峰时占比(%)' }, { name: '夜间用电占比(%)' }, { name: '周期性用电指数' }],
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [25, 456, 532, 815, 1159],
          name: '上班族',
        },
        {
          value: [46, 263, 615, 803, 1352],
          name: '老年用户',
        },
        {
          value: [88, 186, 685, 962, 796],
          name: '商户',
        },
        {
          value: [125, 389, 734, 1059, 569],
          name: 'EV用户',
        },
      ],
    },
  ],
})

const optionThree = computed(() => {
  return {
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter (params: any) {
        let result = `当前时刻:<br/>${params[0].name}<br/>`
        params.forEach((item: any) => {
          result += `${item.seriesName}: ${item.value}kw<br/>`
        })
        return result
      },
      extraCssText: 'width:150px;white-space:wrap',
      backgroundColor: '#21ba94',
      textStyle: {
        color: '#fff',
      },
      borderWidth: 0,
    },
    legend: {
      show: currentStatus.hours === '0',
      top: 'bottom',
      icon: 'rect',
      data: ['上班族', '老年用户', '商户', 'EV用户'],
    },
    grid: {
      top: '5%',
      left: '5%',
      right: '5%',
      bottom: currentStatus.hours === '0' ? '15%' : '10%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          opacity: 0.6,
        },
      },
    },
    series: chartSeriesThree.value,
  }
})

const topList = reactive<any>([
  {
    icon: 'airplay-line',
    content: '用户编号',
    number: '1987',
    unit: '',
  },
  {
    icon: 'flashlight-line',
    content: '峰值负荷',
    number: '1987',
    unit: 'kw',
  },
  {
    icon: 'battery-low-line',
    content: '谷值负荷',
    number: '87',
    unit: 'kw',
  },
  {
    icon: 'scales-line',
    content: '谷峰比',
    number: '39',
    unit: '',
  },
  {
    icon: 'pulse-line',
    content: '波动率',
    number: '0.8',
    unit: 's',
  },
  {
    icon: 'time-line',
    content: '典型用电时段',
    number: '18-20',
    unit: '点',
  },
])

const chooseIndex = ref<any>(0)

const handleStyleFun = (e: any, status: any) => {
  chooseIndex.value = status
}

const getUsersForSelectedGroup = () => {
  return groupUsers[selectedUserGroup.value as UserGroupKey] || []
}

const tagTypes = ['success', 'info', 'warning']
</script>

<template>
  <div class="user-electricity-container no-background-container">
    <div class="page-top">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in cardInfo" :key="index" :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
          <el-card>
            <div class="card-top">
              <div class="title-with-icon">
                <vab-icon class="card-icon" :icon="item.icon" />
                <span>{{ item.title }}</span>
              </div>
              <div>{{ item.en }}</div>
            </div>
            <div class="card-middle">
              <div v-for="(it, idx) in item.data" :key="idx" class="middle-row">
                <div class="middle-left">
                  <div>{{ it.name }}</div>
                  <div>{{ it.en }}</div>
                </div>
                <div class="middle-right">
                  <span>{{ it.value }}</span>
                  <span>{{ it.unit }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card>
          <!-- <div class="index-top">
            <el-row :gutter="20">
              <el-col :lg="12" :md="12" :sm="24" :xl="4" :xs="24" v-for="(item, index) in topList" :key="index">
                <div
                  class="card-content"
                  :class="chooseIndex == index ? 'card-choose' : 'card-nochoose'"
                  @click="handleStyleFun($event, index)"
                >
                  <div class="card-icon">
                    <vab-icon :icon="item.icon" />
                  </div>
                  <span style="margin: 0 20px">{{ item.content }}</span>
                  <div>
                    <span class="card-blod">{{ item.number }}</span>
                    <span>{{ item.unit }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div> -->
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>用户日负荷特征曲线图</span>
            </div>
            <div class="middle-right">
              <div>
                <el-select v-model="currentStatus.status" placeholder="请选择">
                  <el-option label="当前+预测" value="0" />
                  <el-option label="当前" value="1" />
                  <el-option label="预测" value="2" />
                </el-select>
              </div>
              <div style="margin-left: 20px">
                <el-select v-model="currentStatus.user" placeholder="请选择">
                  <el-option label="所有用户" value="0" />
                  <el-option label="上班族" value="1" />
                  <el-option label="老年用户" value="2" />
                  <el-option label="商户" value="3" />
                </el-select>
              </div>
            </div>
          </div>
          <div style="height: 260px">
            <vab-chart :option="option" />
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left" style="margin-bottom: 10px">
              <span class="title-style"></span>
              <span>用户行为雷达图</span>
            </div>
          </div>
          <div style="height: 480px">
            <vab-chart :option="optionTwo" />
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>典型负荷曲线对比</span>
            </div>
            <div class="middle-right">
              <div>
                <el-select v-model="currentStatus.hours" placeholder="请选择" style="width: 150px">
                  <el-option label="全部用户" value="0" />
                  <el-option label="上班族" value="1" />
                  <el-option label="老年用户" value="2" />
                  <el-option label="商户" value="3" />
                  <el-option label="EV商户" value="4" />
                </el-select>
              </div>
            </div>
          </div>
          <div style="height: 480px">
            <vab-chart :option="optionThree" />
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>用户分类分组视图</span>
            </div>
            <div class="middle-right">
              <div>
                <el-select v-model="selectedUserGroup" placeholder="选择用户组">
                  <el-option v-for="group in userGroups" :key="group.name" :label="group.name" :value="group.name" />
                </el-select>
              </div>
            </div>
          </div>

          <div class="user-groups-container">
            <el-row :gutter="20">
              <el-col v-for="group in userGroups" :key="group.name" :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
                <div class="user-group-card" :class="{ active: selectedUserGroup === group.name }" @click="selectedUserGroup = group.name">
                  <span class="group-name">{{ group.name }}:</span>
                  <span class="group-count">{{ group.count }}户</span>
                </div>
              </el-col>
            </el-row>

            <div class="user-table-container">
              <el-table border :data="getUsersForSelectedGroup()" highlight-current-row style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column label="编号" prop="id" width="120" />
                <el-table-column label="用户名称" prop="name" width="100" />
                <el-table-column label="所属区域" prop="area" width="100" />
                <el-table-column label="分类匹配度" prop="classificationScore" width="100">
                  <template #default="{ row }">
                    <el-progress
                      :color="row.classificationScore > 90 ? '#0ab389' : '#e6a23c'"
                      :format="(val) => `${val}%`"
                      :percentage="row.classificationScore || 0"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="典型用电时段" prop="typicalUsageTime" width="120" />
                <el-table-column label="操作" width="150">
                  <template #default="scope">
                    <el-button size="small" type="primary" @click="viewUserDetails(scope.row)">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="group-info-box">
              <div class="info-header">
                <span>用户组: {{ selectedUserGroup }}</span>
              </div>
              <div class="info-content">
                <p>
                  关键属性类型:
                  <span v-if="selectedUserGroup === '上班族'">谷峰比, 波动率, 峰时占比</span>
                  <span v-else-if="selectedUserGroup === '老年用户'">夜间用电占比, 周期性用电指数</span>
                  <span v-else-if="selectedUserGroup === '商户'">峰值负荷, 波动率, 典型用电时段</span>
                  <span v-else>谷峰比, 夜间用电占比, 波动率</span>
                </p>
                <p>
                  关键属性值:
                  <span v-if="selectedUserGroup === '上班族'">0.8, 39%, 18-20点</span>
                  <span v-else-if="selectedUserGroup === '老年用户'">35%, 0.5</span>
                  <span v-else-if="selectedUserGroup === '商户'">1987kw, 0.9, 10-18点</span>
                  <span v-else>0.7, 45%, 0.6</span>
                </p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- User details dialog -->
    <el-dialog v-model="showUserDetails" custom-class="user-details-dialog" destroy-on-close title="用户详情" width="700px">
      <div v-if="selectedUser" class="user-details">
        <div class="user-header">
          <div class="user-title">
            <div class="user-avatar">{{ selectedUser.name.substring(0, 1) }}</div>
            <div class="user-info">
              <h3>
                {{ selectedUser.name }}
                <span class="user-id">#{{ selectedUser.id }}</span>
              </h3>
              <p>{{ selectedUser.area }}</p>
            </div>
          </div>
          <el-tag effect="dark" size="large" type="success">{{ selectedUserGroup }}</el-tag>
        </div>

        <el-divider content-position="left">
          <vab-icon icon="database-2-line" />
          用电特征指标
        </el-divider>

        <el-row :gutter="20">
          <el-col
            v-for="(metric, index) in [
              { label: '峰值负荷', value: selectedUser.peakLoad, icon: 'flashlight-line' },
              { label: '谷值负荷', value: selectedUser.valleyLoad, icon: 'battery-low-line' },
              { label: '谷峰比', value: selectedUser.peakValleyRatio, icon: 'scales-line' },
              { label: '波动率', value: selectedUser.fluctuationRate, icon: 'pulse-line' },
              { label: '峰时占比', value: selectedUser.peakTimePercentage, icon: 'pie-chart-2-line' },
              { label: '夜间用电占比', value: selectedUser.nightUsagePercentage, icon: 'moon-line' },
              { label: '周期性指数', value: selectedUser.periodicityIndex, icon: 'time-line' },
              { label: '典型用电时段', value: selectedUser.typicalUsageTime, icon: 'alarm-line' },
              {
                label: '分类匹配度',
                value: `${selectedUser.classificationScore || 0}%`,
                icon: 'medal-line',
                isProgress: true,
                score: selectedUser.classificationScore || 0,
              },
            ]"
            :key="index"
            :span="8"
          >
            <div class="metric-card">
              <div class="metric-icon">
                <vab-icon :icon="metric.icon" />
              </div>
              <div class="metric-content">
                <div class="metric-label">{{ metric.label }}</div>
                <div v-if="!metric.isProgress" class="metric-value">{{ metric.value }}</div>
                <div v-else class="metric-progress">
                  <el-progress
                    :color="metric.score > 90 ? '#0ab389' : '#e6a23c'"
                    :percentage="metric.score || 0"
                    :stroke-width="8"
                  />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-divider content-position="left">
          <vab-icon icon="file-list-line" />
          分类依据
        </el-divider>

        <div class="classification-basis">
          <div class="basis-card">
            <template v-for="(basis, index) in selectedUser.classificationBasis" :key="index">
              <el-tag v-if="index % 3 === 0" class="basis-tag" effect="light" type="success">
                <vab-icon icon="check-line" />
                {{ basis }}
              </el-tag>
              <el-tag v-else-if="index % 3 === 1" class="basis-tag" effect="light" type="info">
                <vab-icon icon="check-line" />
                {{ basis }}
              </el-tag>
              <el-tag v-else class="basis-tag" effect="light" type="warning">
                <vab-icon icon="check-line" />
                {{ basis }}
              </el-tag>
            </template>
          </div>
        </div>

        <el-divider content-position="left">
          <vab-icon icon="refresh-line" />
          用户组调整
        </el-divider>

        <div class="reassign-section">
          <div class="reassign-header">
            <span class="reassign-label">重新划分用户组:</span>
            <div class="reassign-info">当前用户组特征与目标用户组的用电行为存在较大差异时，可以重新划分用户组。</div>
          </div>

          <div class="reassign-controls">
            <el-select v-model="targetGroup" placeholder="选择目标用户组">
              <el-option
                v-for="group in userGroups"
                :key="group.name"
                :disabled="group.name === selectedUserGroup"
                :label="group.name"
                :value="group.name"
              />
            </el-select>
            <el-button :disabled="targetGroup === selectedUserGroup" type="primary" @click="reassignUser">
              <vab-icon icon="map-pin-line" />
              确认调整
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.user-electricity-container {
  height: 100%;
  :deep() {
    .el-card {
      margin-bottom: 20px;
      overflow: hidden;
      background-color: #fff;
      background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(240, 255, 250, 0.5));
      border: none;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 24px rgba(10, 179, 137, 0.15);
        transform: translateY(-5px);
      }

      .el-card__header {
        position: relative;

        > div > span {
          display: flex;
          align-items: center;

          i {
            margin-right: 3px;
          }
        }
      }

      .el-card__body {
        position: relative;
        padding: 20px;

        .card-footer-tag {
          position: absolute;
          right: var(--el-margin);
          bottom: 15px;
        }
      }
    }

    .page-top {
      min-height: 200px;
      .card-top {
        position: relative;
        padding-bottom: 15px;
        margin-bottom: 15px;
        font-size: 20px;
        font-weight: bold;
        border-bottom: 1px dashed #ebeef5;

        .title-with-icon {
          display: flex;
          gap: 8px;
          align-items: center;

          .card-icon {
            width: 40px;
            height: 40px;
            padding: 8px;
            font-size: 24px;
            color: #0ab389;
            background-color: rgba(10, 179, 137, 0.1);
            border-radius: 8px;
          }
        }

        div:first-child {
          color: #303133;
        }

        div:last-child {
          margin-top: 4px;
          font-size: 14px;
          font-weight: normal;
          color: #909399;
        }
      }

      .middle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding-bottom: 10px;
        margin-top: 16px;
        border-bottom: 1px solid #f2f5fa;
        transition: all 0.3s ease;

        &:hover {
          border-bottom-color: #d4e6e0;
          transform: translateX(5px);
        }

        .middle-left {
          font-size: 16px;

          div:first-child {
            font-weight: 500;
            color: #303133;
          }

          div:last-child {
            margin-top: 4px;
            font-size: 12px;
            color: #909399;
          }
        }

        .middle-right {
          position: relative;
          display: flex;
          align-items: baseline;

          &::before {
            position: absolute;
            top: 50%;
            left: -15px;
            width: 3px;
            height: 70%;
            content: '';
            background-color: #0ab389;
            border-radius: 3px;
            opacity: 0;
            transform: translateY(-50%);
            transition: all 0.3s ease;
          }

          span:nth-child(1) {
            font-size: 26px;
            font-weight: bold;
            color: #0ab389;
            transition: all 0.3s ease;
          }

          span:nth-child(2) {
            margin-left: 6px;
            font-size: 14px;
            color: #909399;
          }
        }

        &:hover .middle-right::before {
          left: -10px;
          opacity: 1;
        }
      }
    }
  }
  .index-tittle {
    width: 100%;
    height: 60px;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    line-height: 60px;
    color: #000;
    background-color: #fff;
  }
  .card-style {
    :deep() {
      .el-card__body {
        height: 550px;
      }
    }
  }
  .index-top {
    width: 100%;

    .card-content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 60px;
      margin-bottom: 20px;
      line-height: 60px;
      text-align: center;
      background-color: #f2f5fa;
      border-radius: 10px;
      > span {
        margin: 0 20px;
      }
      .card-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 20px;
      }
      .card-blod {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .card-choose {
      position: relative;
      background-color: #cef0e7;
      border: 1px solid #09b388;
      &::before {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 0;
        height: 0;
        content: '';
        border: 6px solid #09b388;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-radius: 6px;
      }
    }

    .card-nochoose {
      background-color: #f2f5fa;
      border: none;
    }
  }
  .index-middle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 18px;
    text-align: center;
    .middle-left {
      display: flex;
      margin: 0;
      vertical-align: middle;
      .title-style {
        display: inline-block;
        width: 5px;
        height: 20px;
        margin-right: 10px;
        background-color: #0ab389;
        border-radius: 0 5px 5px 0;
      }
    }
    .middle-right {
      display: flex;
    }
  }
  .search-style {
    height: 480px;
    // display: flex;
    margin-top: 20px;
    > div {
      margin-right: 20px;
    }
    .search-button {
      // 绿色背景色---基础按钮
      :deep() {
        .el-button--primary {
          color: #ffffff;
          background-color: #0ab389;
          border-color: #0ab389;
        }
        .el-button--primary.el-button--large.is-active,
        .el-button--primary.el-button--large:active {
          color: #ffffff;
          background-color: #afe4d7;
          border-color: #afe4d7;
        }
        // .el-button--primary:hover {
        //   color: #0ab389;
        //   background-color: #ffffff;
        //   border-color: #0ab389;
        // }
        // .el-button--primary:focus {
        //   color: #ffffff;
        //   background-color: #0ab389;
        //   border-color: #0ab389;
        // }
      }
    }
    .list-content {
      position: relative;
      width: 100%;
      height: 60px;
      margin-top: 30px;
      font-size: 16px;
      font-weight: bold;
      line-height: 60px;
      border: 1px solid #f2f5fa;
      border-radius: 10px;
      .left-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 8px;
        height: 60px;
        background: linear-gradient(135deg, #09b388, hsl(166, 44%, 83%));
        border-radius: 10px 0 0 10px;
      }
      .right-content {
        margin-left: 30px;
      }
    }
    .search-bottom {
      display: flex;
      justify-content: space-around;
      margin-top: 50px;
    }
  }
  .user-groups-container {
    padding: 15px 0;

    .user-group-card {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      margin-bottom: 15px;
      cursor: pointer;
      background-color: #f2f5fa;
      border-radius: 8px;
      transition: all 0.3s;

      &.active {
        position: relative;
        background-color: #cef0e7;
        border: 1px solid #09b388;

        &::before {
          position: absolute;
          top: 3px;
          left: 3px;
          width: 0;
          height: 0;
          content: '';
          border: 6px solid #09b388;
          border-right-color: transparent;
          border-bottom-color: transparent;
          border-radius: 6px;
        }
      }

      &:hover {
        background-color: #e0f5ee;
      }

      .group-name {
        margin-right: 8px;
        font-weight: bold;
      }

      .group-count {
        font-weight: bold;
      }
    }

    .user-table-container {
      margin: 20px 0;

      :deep(.el-table) {
        overflow: hidden;
        border-radius: 10px;

        .el-table__header-wrapper th {
          background-color: #f2f5fa;
        }

        .el-button--primary {
          color: #ffffff;
          background-color: #0ab389;
          border-color: #0ab389;

          &:hover {
            opacity: 0.9;
          }
        }
      }
    }

    .group-info-box {
      overflow: hidden;
      border: 1px solid #e0e0e0;
      border-radius: 10px;

      .info-header {
        padding: 10px 15px;
        font-weight: bold;
        background-color: #f2f5fa;
      }

      .info-content {
        padding: 15px;

        p {
          margin: 8px 0;
          line-height: 1.5;
        }
      }
    }
  }
}

.user-details-dialog {
  :deep(.el-dialog__header) {
    padding: 20px;
    margin-right: 0;
    background: #0ab389;
    border-bottom: 1px solid #eee;
    border-radius: 4px 4px 0 0;

    .el-dialog__title {
      font-size: 18px;
      font-weight: bold;
      color: white;
    }

    .el-dialog__headerbtn {
      top: 18px;
      right: 20px;

      .el-dialog__close {
        color: white;
      }
    }
  }

  :deep(.el-dialog__body) {
    padding: 20px 25px;
  }

  :deep(.el-divider__text) {
    font-weight: bold;
    color: #0ab389;
    background-color: #f8f9fa;

    i {
      margin-right: 5px;
    }
  }
}

.user-details {
  .user-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #eee;

    .user-title {
      display: flex;
      align-items: center;

      .user-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        font-size: 24px;
        font-weight: bold;
        color: white;
        background: linear-gradient(135deg, #0ab389, #42d392);
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(10, 179, 137, 0.2);
      }

      .user-info {
        margin-left: 15px;

        h3 {
          margin: 0 0 5px;
          font-size: 18px;

          .user-id {
            margin-left: 5px;
            font-size: 14px;
            font-weight: normal;
            color: #909399;
          }
        }

        p {
          margin: 0;
          color: #606266;
        }
      }
    }
  }

  .metric-card {
    display: flex;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      transform: translateY(-2px);
    }

    .metric-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      margin-right: 12px;
      color: white;
      background: linear-gradient(135deg, #0ab389, #42d392);
      border-radius: 8px;

      i {
        font-size: 20px;
      }
    }

    .metric-content {
      flex: 1;

      .metric-label {
        margin-bottom: 5px;
        font-size: 14px;
        color: #606266;
      }

      .metric-value {
        font-size: 18px;
        font-weight: bold;
        color: #303133;
      }

      .metric-progress {
        margin-top: 5px;
      }
    }
  }

  .classification-basis {
    margin-bottom: 25px;

    .basis-card {
      display: flex;
      flex-wrap: wrap;
      padding: 15px;
      background-color: #f8f9fa;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .basis-tag {
      padding: 8px 14px;
      margin-right: 12px;
      margin-bottom: 10px;
      font-size: 14px;

      i {
        margin-right: 5px;
      }
    }
  }

  .reassign-section {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

    .reassign-header {
      margin-bottom: 15px;

      .reassign-label {
        display: block;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }

      .reassign-info {
        font-size: 14px;
        color: #909399;
      }
    }

    .reassign-controls {
      display: flex;
      align-items: center;

      .el-select {
        width: 200px;
        margin-right: 15px;
      }

      .el-button {
        padding: 12px 20px;
        background-color: #0ab389;
        border-color: #0ab389;

        &:hover,
        &:focus {
          background-color: #09a17c;
          border-color: #09a17c;
        }

        &:disabled {
          color: #c0c4cc;
          background-color: #f5f7fa;
          border-color: #e4e7ed;
        }

        i {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
